<template>
    <div class="header">
        <div class="portrait"></div>
        <el-card v-if="this.$store.state.headerBgState==null" class="box-card">好好学习 天天向上</el-card>

        <el-image
                v-if="this.$store.state.headerBgState!=null"
                class="box-card"
                :src="headerBgState"
                :preview-src-list="srcList">
        </el-image>
    </div>
</template>

<script>
    export default {
        name: "Header",

        data() {
            return {
                // srcList: [
                //     this.headerBgState()
                // ]

            };
        },
        computed:{
            headerBgState(){
                return this.$store.state.headerBgState
            },
            srcList(){
                let a=[]
                a.push(this.$store.state.headerBgState)
                return a
            }

        },

        components: {},
        methods: {



        }
    };
</script>


<style lang="scss" scoped>
    .header {
        .portrait {
            width: 200px;
            height: 200px;
            margin: 0 auto;
            border-radius: 50%;
            border-color: black;
            border-width: 2px;
            background-image: url("../../../assets/images/portrait.jpg");
            background-size: cover;
        }

        .box-card {

            margin: 1rem;
            font-family: cursive;
            font-size: 2.5rem;
            -webkit-text-stroke: thin;
            background-size: cover;
        }



    }
</style>
